<template>
    <div class="page">
        <header-view title="意见反馈"></header-view>
        <div class="cotComWrap">
            <div class="textWrap">
                <div class="tghArea">
                    <textarea placeholder="请写下您的意见或建议" v-model="msg"></textarea>
                    <p><span>{{msg.length}}</span>/200</p>
                </div>
                <p>我们懂得聆听，欢迎您留下宝贵的意见！</p>
                <button-view title="确定" @btnFnBack="commit" :class="{hui: !msg}" style="border-radius: 0.2rem;"></button-view>
            </div>
        </div>
    </div>
</template>

<script>
    import HeaderView from './../components/header';
    import ButtonView from './../components/button';
    import utils from './../js/utils';
    export default {
        name: "feedback",
        data(){
            return {
                msg: ''
            }
        },
        components:{
            HeaderView,
            ButtonView
        },
        methods:{
            commit(){
                let that = this;
                if(!that.msg) return;
                utils.ajax({
                    url: utils.AJAX_SRC + 'Mine/Feedback',
                    params:{ content: that.msg },
                    success(result){
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        utils.showTips('提交成功!');
                        that.msg = '';
                    }
                })
            }
        },
        watch:{
            msg(){
                if(this.msg.length > 200) this.msg = this.msg.substring(0 , 200);
            }
        }
    }
</script>

<style scoped>
    .textWrap{padding: 0.75rem;}
    a.hui{background: #C6C6C6;}
    .textWrap p{margin: 0.5rem 0 1rem;}
    textarea{width: 100%;border: none;resize: none;background: #F5F5F5;height: 7rem;padding: 0.5rem 0.5rem 1.5rem;
        outline: none;font-family: Microsoft YaHei;font-size: 0.75rem;border-radius: 0.1rem;}
    .tghArea{position: relative;}
    .tghArea p{position: absolute;right: 0.5rem;bottom: -0.5rem;}
</style>
